import React from 'react';
import useWindowWidth from '@/hooks/event/use-window-width';

export default function CardLiat({ demoData,emitCard }) {
  const { isPc } = useWindowWidth();

  const handleClick = (event: React.MouseEvent<HTMLDivElement, MouseEvent>, item: any) => {
    
    if (window.getSelection()?.toString()) {
      
      return;
    }

    // 如果是复制操作，则执行复制操作
    emitCard(item?.content);
  };

  

  return (
    <div >
      <div style={{fontSize:"18px",fontWeight:'bold',color:'#1D1E51'}}>{demoData.about}</div>
      <div style={{fontSize:'16px',color:'#8A8EA7'}}>{demoData.title}</div>

      <ul style={{marginTop: isPc?'30px':'15px'}} >
        {demoData.list?.slice(0, 8).map((item, index) => {
          return  (
            <div style={{display:'flex',marginBottom:'10px'}}    key={item.content}>
              <div style={{
                width:'30px',
                height:'30px',
                borderRadius:'50%', 
                display:'flex',
                justifyContent:'center',
                alignItems:'center',
                fontFamily:'BDZYJT--GB1',
                color:index < 3 ? '#fff':'#1D1E51',
                fontSize:'16px',
                flexShrink:'0',
                background:index == 0 ? `linear-gradient(to bottom, rgba(180 ,47 ,254) 0%, rgba(161,78,255) 100%)` : 
                index == 1 ? `linear-gradient(to bottom, rgba(142 ,102 ,254) 0%, rgba(120,110,255) 100%)` :
                index == 2 ? `linear-gradient(to bottom, rgba(94 ,100 ,254) 0%, rgba(72,85,255) 100%)` :
                index > 2 ? '#ffffff':'transparent'
                }}>{index+1}</div>
              <li onClick={(event) => handleClick(event, item)} style={{fontSize:'16px', lineHeight:'30px',color: '#1D1E51',marginLeft:'18px',whiteSpace:'nowrap',overflow:'hidden',textOverflow:'ellipsis', cursor:'pointer'}} key={index}>{item.content}</li>
            </div>
          )
        })}
      </ul>
    </div>
  )
}